<script setup>
import { ref, watch } from 'vue'
const count = ref(0)
const add = () => count.value++
const cut = () => count.value--

const money = ref(100000)
const payMoney = () => {
  money.value -= 100
}

const person = ref({
  name: '张三',
  age: 20
})
const changeAge = () => {
  person.value.age++
}

// 监测变化的时候 不用写.value

// 1.监听简单数据类型
watch(count, (newValue, oldValue) => {
  console.log(`新值${newValue},旧值${oldValue}`);
})

watch(money, (newValue, oldValue) => {
  console.log(`新值${newValue},旧值${oldValue}`);
})

// 2.侦听多个数据类型
watch([count, money], (newValue, oldValue) => {
  console.log(`新值${newValue},旧值${oldValue}`);
})

// 3.侦听复杂数据
// watch(person,(newValue)=>{
//   console.log(`新值${newValue.age}`);
// },{
//   deep:true
// })

// watch(()=>person.value.age,(newValue)=>{
//   console.log(`新值${newValue}`);
// })

// 4.默认侦听一次
watch(() => person.value.age, (newValue) => {
  console.log(`新值${newValue}`);
}, {
  immediate: true
})
</script>

<template>
  <div>
    <button @click="cut">-</button>
    <span>{{ count }}</span>
    <button @click="add">+</button>
  </div>
  <div>
    <span>{{ money }}</span>
    <button @click="payMoney">花钱</button>
  </div>
  <div>
    <span>{{ person }}</span>
    <button @click="changeAge">新增年龄</button>
  </div>
</template>

<style scoped></style>